<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="webact/css/bootstrap.min.css" rel="stylesheet">
    <link href="webact/css/reset.css" rel="stylesheet">
    <link href="webact/css/swiper.min.css" rel="stylesheet">

    <link href="webact/css/index.css" rel="stylesheet">
    <link href="webact/css/university-union.css" rel="stylesheet">
    <link href="webact/css/news.css" rel="stylesheet">
    <title>Document</title>
    <style>
        ul
        {
            display: inline-block;
        }
        li
        {
            padding: 10px 30px;
            background: lightblue;
            margin: 2px;
            width: 500px;   
        }
        body
        {
            background: pink;
        }
        img
        {
            float: right;
            width: 500px;
        }
    </style>
</head>
<body>
    <ul>
        <li>标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <img src="" alt="">
</body>
<script src="../../public/js/bootstrap.min.js"></script>
<script src="../../public/js/jquery.min.js"></script>
<script>
    var ss = true
    $('li:eq(0)').hover(
        function(){
            $('li:eq(0)').css('background-color','rgba(230,230,230,0.4)')
            $('img').attr('src','../../public/images/index/story-02.jpg')    

            $('li:eq(1)').css('background-color','rebeccapurple')
            $('li:eq(2)').css('background-color','rebeccapurple')
            $('li:eq(3)').css('background-color','rebeccapurple')       
        },
        function(){
            $('li:eq(0)').css('background-color','rgba(230,230,230,0.4)')
        }
    )
    $('li:eq(1)').hover(
        function(){
            $('li:eq(1)').css('background-color','rgba(230,230,230,0.4)')
            $('img').attr('src','../../public/images/index/story-03.jpg')
            $('li:eq(0)').css('background-color','rebeccapurple')

            $('li:eq(2)').css('background-color','rebeccapurple')
            $('li:eq(3)').css('background-color','rebeccapurple')
        },
        function(){
            $('li:eq(1)').css('background-color','rgba(230,230,230,0.4)')
        }
    )
    $('li:eq(2)').hover(
        function(){
            $('li:eq(2)').css('background-color','rgba(230,230,230,0.4)')
            $('img').attr('src','../../public/images/index/story-06.jpg')
            $('li:eq(0)').css('background-color','rebeccapurple')
            $('li:eq(1)').css('background-color','rebeccapurple')

            $('li:eq(3)').css('background-color','rebeccapurple')
            
        },
        function(){
            $('li:eq(2)').css('background-color','rgba(230,230,230,0.4)')
        }
    )
    
</script>
</html>